import '@ant-design/compatible/assets/index.css';
import { Avatar, Card, Input, List, Typography, Badge } from 'antd';
import React, { useCallback, useState, useImperativeHandle } from 'react';
import { useRequest } from '@umijs/hooks';
import { MedicineBoxFilled } from '@ant-design/icons';
import { formatMoment } from '@/utils/utils';
import styles from './Left.less';
import { getNewMsgAmount } from '../service';

const { Search } = Input;
const { Text, Paragraph } = Typography;

const MessageCenterLeft = ({ onClick, setoRadiotype, cRef }) => {
  const [list, setList] = useState([]);
  const [inited, setInit] = useState(false);
  const [checkedMsgType, setChecked] = useState('');
  const { loading, data, run } = useRequest(getNewMsgAmount, {
    pollingInterval: 30000,
    initialData: [],
    onSuccess() {
      setList(data);
      if (!inited && data && data.length > 0) {
        onClick(data[0].msgType);
        setChecked(data[0].msgType);
        setInit(true);
        setTimeout(() => {
          setoRadiotype(+data[0].msgAmount ? 'unread' : 'read');
        })
      }
    },
  });

  useImperativeHandle(cRef, () => ({
    load: () => run(),
  }))

  const onItemClick = useCallback(
    ({msgType, msgAmount}) => {
      setoRadiotype(+msgAmount ? 'unread' : 'read');
      onClick(msgType);
      setChecked(msgType);
    },
    [onClick],
  );

  const onSearch = useCallback(
    val => {
      setList(data.filter(item => item.msgTypeName.indexOf(val) !== -1));
    },
    [data],
  );

  const extraContent = (
    <div className={styles.extraContent}>
      <Search className={styles.extraContentSearch} placeholder="请输入" onSearch={onSearch} />
    </div>
  );

  return (
    <>
    {/* hidden=false时， 此处显示 */}
      <div className={styles.standardList} hidden={true}>
        <Card
          className={styles.listCard}
          bordered={false}
          title={extraContent}
          bodyStyle={{
            padding: '24px 0',
          }}
        >
          <List
            size="large"
            rowKey="msgType"
            loading={loading}
            dataSource={list}
            renderItem={item => (
              <List.Item
                key={item.msgDate}
                className={`${styles.item} ${
                  item.msgType === checkedMsgType ? styles.itemChecked : ''
                }`}
                style={{cursor: 'pointer'}}
                onClick={() => onItemClick(item)}
              >
                <List.Item.Meta
                  avatar={
                    <Badge count={item.msgAmount}>
                      <Avatar icon={<MedicineBoxFilled />} shape="square" size="large" />
                    </Badge>
                  }
                  title={
                    <div>
                      {item.msgTypeName}
                      <Text type="secondary" style={{ float: 'right' }}>
                        {formatMoment(item.msgDate)}
                      </Text>
                    </div>
                  }
                  description={
                    <Paragraph ellipsis={{ rows: 2, expandable: false, suffix: '...' }}>
                      {''.replace.call(item.msgContent, /\<[^\>]*\>/g, '')}
                    </Paragraph>
                  }
                />
              </List.Item>
            )}
          />
        </Card>
      </div>
    </>
  );
};

export default MessageCenterLeft;
